import { customRef } from 'vue';

/**
 * 带防抖的响应式数据组合式函数
 * @param {*} initialValue - 初始值
 * @param {Number} delay - 防抖延迟时间（毫秒），默认300ms
 * @returns {Ref} 防抖后的响应式数据
 */
export const useDebouncedRef = (initialValue, delay = 300) => {
  let timer = null; // 防抖定时器

  // 自定义ref：控制数据更新的时机（添加防抖延迟）
  return customRef((track, trigger) => {
    return {
      // 读取数据时触发（追踪依赖）
      get() {
        track(); // 告诉Vue：这个数据被组件依赖了，数据变了要更新组件
        return initialValue;
      },

      // 修改数据时触发（添加防抖延迟后更新）
      set(newValue) {
        // 每次修改都清除之前的定时器，避免多次触发
        if (timer) clearTimeout(timer);

        // 延迟delay毫秒后，更新实际值并触发组件更新
        timer = setTimeout(() => {
          initialValue = newValue; // 更新原始数据
          trigger(); // 告诉Vue：数据变了，触发组件重新渲染
          timer = null; // 清空定时器
        }, delay);
      },
    };
  });
};